<template>
  <div class="content-wrapper">
  	<mt-header fixed title="登录"></mt-header>
    <div class="content-wrapper-context">
    	<div class="login-wrapper">
    		<div class="login-container">
    			<div class="login-input-field">
    				<div class="login-option">
    					<div class="login-option-control">
    						<input type="text" placeholder="用户名" name="userid" v-model="vForm.userid">
    					</div>
    				</div>
    				<div class="login-option">
    					<div class="login-option-control">
    						<input type="password" placeholder="密码" name="userid" v-model="vForm.userpwd">
    					</div>
    				</div>
    			</div>
    			<div class="login-input-submit">
    				<div class="submit-wrapper">
    					<mt-button type="primary" @click="submitLogin">登录</mt-button>
    				</div>
    				<div class="otherlogin-wrapper">
    					<div class="center-wrapper">
    						<div class="otherlogin-content">
	    						<a href="javascript:;"><span class="icon-qqicon" style="font-size: 40px;line-height: 1;"></span></a>
	    					</div>
	    					<div class="otherlogin-content">
	    						<a href="javascript"><span class="icon-weixin" style="font-size: 36px;line-height: 1.2;"></span></a>
	    					</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
  </div>
</template>

<script>
import axios from '@/api/axios'
import {mapMutations} from 'vuex'
export default {
	data: function () {
		return {
			vForm: {
				userid: '',
				userpwd: '',
			}
		}
	},
	created: function () {
		this.initUid();
	},
	methods: {
		initUid: function () {
			var uid = localStorage.getItem('uid');
			if(uid) this.vForm.userid = uid;
		},
		submitLogin: function () {
			var vForm = this.vForm;
			var userid = vForm.userid;
			var userpwd = vForm.userpwd;
			if(!userid || !userpwd) {
				this.$toast('请完善登录信息');
				return;
			}
			localStorage.setItem('uid', userid);
			var setting = {
				method: 'POST',
				url: '/login'
			};
			var data = {
				phone: userid,
				password: userpwd
			};
			axios((res) => {
				if(res.code === 0) {
					var data = res.data;
					this.setToken(true);
					this.setId(userid);
					this.setUserMsg({
						username: data.username,
						usercar: data.truckid
					});
					this.$router.push({path: '/home/'});
				}else {
					this.$toast('请确认用户名密码的正确性，重新登录');
				}
			}, {setting, data});
		},
		...mapMutations(['setToken', 'setId', 'setUserMsg'])
	}
}
</script>

<style>
	.login-container {
		margin-top: 100px;
	}
	.login-input-field {
		width: 70%;
	    margin: 0 auto;
	    margin-bottom: 50px;
	}
	.login-option {
		height: 50px;
    	margin-bottom: 10px;
	}
	.login-option-control {
		height: 100%;
	    width: 100%;
	    position: relative;
	}
	.login-option-control:after {
		content: '';
	    position: absolute;
	    width: 100%;
	    border-bottom: 1px solid #c5c2c2;
	    bottom: 0;
		left: 0;
	}
	.login-option-control input {
		width: 100%;
    	height: 100%;
    	border: none;;
	}
	.submit-wrapper {
		text-align: center;
	}
	.otherlogin-wrapper {
		display: flex;
	}
	.center-wrapper {
		display: flex;
	    margin: 0 auto;
	    font-size: 35px;
	}
	.otherlogin-content {
		margin: 0 10px;
	}
</style>